<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <div class="app-container">
      <div class="build-container">
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1" description="构建reader">1</el-step>
          <el-step title="步骤 2" description="构建writer">2</el-step>
          <el-step title="步骤 3" description="表映射">3</el-step>
          <el-step title="步骤 4" v-if="dialogStatus=='create'" description="批量创建">4</el-step>
          <el-step title="步骤 4" v-if="dialogStatus=='update'" description="确认修改">4</el-step>
        </el-steps>

        <div v-show="active === 1" class="step1">
          <Reader ref="reader" :reader="readerFrom" :readidList="readidList"  />
        </div>
        <div v-show="active === 2" class="step2">
          <Writer ref="writer" :readerInfo="readerInfo" :writer="writerForm" :writeidList="writeidList" />
        </div>
        <div v-show="active === 3" class="step3">
          <Mapper ref="mapper" :mapperFrom="mapperFrom" />
        </div>
        <div v-show="active === 4" class="step4">

          <el-button v-show="dialogStatus=='create'" type="primary" @click="createJob">批量创建任务</el-button>

        </div>

        <el-button :disabled="active === 1" style="margin-top: 12px;" @click="last">上一步</el-button>
        <el-button v-show="active !== 4" type="primary" style="margin-top: 12px;margin-bottom: 12px;"
          @click="next">下一步</el-button>
          <el-button v-show="active == 4&&dialogStatus=='update'"  type="primary" @click="updateJob">确认修改</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as jobTemplate from '@/api/dataextractionrealtime/single.js'
import createDataExtractionMore from '@/api/dataextractionrealtime/dataExtraction.js'
import {getDataExtraction } from '@/api/dataextractionrealtime/dataExtraction'
import JsonEditor from '@/components/JsonEditor'
import Pagination from '@/components/Pagination'
import Reader from './reader'
import Writer from './writer'
import Mapper from './mapper'

export default {
  name: 'JsonBuild',
  components: { Reader, Writer, Pagination, Mapper,JsonEditor },
  data() {
    return {
      dialogStatus: 'update',
      textMap: {
        update: '编辑',
        create: '新建'
      },
      dialogFormVisible: false,
      configJson: '',
      active: 1,
      jobTemplate: '',
      jobTemplateSelectDrawer: false,
      list: null,
      currentRow: null,
      listLoading: true,
      triggerNextTimes: '',
      registerNode: [],
      jobJson: '',
      readerInfo: {},
      writerInfo: {},
      togertherArr: [],
      extractionName: '',
      readerFrom:{},
      readidList:[],
      writerForm:{},
      writeidList:[],
      temp:{},
      mapperFrom:{}
    }
  },
  created() {
    // this.getJdbcDs()
  },
  methods: {
    open() {
      this.dialogStatus='create'
      this.dialogFormVisible = true
      this.active = 1
      this.rest()
    },
    update(data){
      this.dialogStatus='update'
      this.dialogFormVisible = true
      this.active = 1
      // console.log(this.temp,'详情')
      // this.rest()
      this.temp=data
      this.readidList=[]
      this.writeidList=[]
      this.readerFrom={
        sourceId:this.temp.sourceDatasourceId,
        splitPk:this.temp.readerDto.readerSplitPk||'',
      }
      this.writerForm={
        sourceId:this.temp.targetDatasourceId,
        status:this.temp.status,
      }

      this.temp.detailList.forEach(item=>{
        this.readidList.push(item.sourceTableId)
        this.writeidList.push(item.targetTableId)
      })
      this.mapperFrom={
        status:this.temp.status,
        extractionName:this.temp.extractionName,
        detailList:this.temp.detailList
      }
      setTimeout(()=>{
        this.$refs.reader.getHistory()
        this.$refs.writer.getHistory()
        this.$refs.mapper.getHistory()
        console.log('333')
      })



    },
    next() {
      const fromTableList = this.$refs.reader.getData().tables
      const toTableList = this.$refs.writer.getData().tables
      this.readerInfo = this.$refs.reader.getData()
      this.writerInfo = this.$refs.writer.getData()
      // const fromTableName = this.$refs.reader.getData().tableName
      // 第一步 reader 判断是否已选字段
      if (this.active === 1) {
        // 实现第一步骤读取的表和字段直接带到第二步骤
        // this.$refs.writer.sendTableNameAndColumns(fromTableName, fromColumnList)
        // 取子组件的数据
        // console.info(this.$refs.reader.getData())
        this.active++
      } else {
        // 将第一步和第二步得到的字段名字发送到第三步
        if (this.active === 2) {
          this.$refs.mapper.sendTables(fromTableList, toTableList,this.dialogStatus)
        }
        if (this.active !== 4) {
          this.active++
        }
      }
      if (this.active === 4) {
        console.log(this.$refs.mapper.getLTables(),'getLTables')
        console.log(this.$refs.mapper.getRTables(),'getRTables')
        let arr = []
        if(this.$refs.mapper.getLTables().length==this.$refs.mapper.getRTables().length){
          this.$refs.mapper.getLTables().forEach(item=>{
          this.$refs.mapper.getRTables().forEach(it=>{
             if(item.tableName==it.tableName){
               arr.push({
                sourceTableId:item.id,
                sourceTableName:item.tableName,
                targetTableId:it.id,
                targetTableName:it.tableName
               })
             }
          })
        })
        }else{
          this.$message.error('数据来源与目标数据源数量不一致')
        }
        console.log(arr, 'arr')
        this.detailList = arr
        this.extractionName = this.$refs.mapper.getName().extractionName
        this.status = this.$refs.mapper.getName().status
      }
    },
    last() {
      if (this.active > 1) {
        this.active--
      }
    },
    rest(){
      setTimeout(()=>{
        this.$refs.reader.rest()
      this.$refs.writer.rest()
      this.$refs.mapper.rest()
      },750)

    },
    // 创建多任务
    createJob() {
      const obj = {
        sourceDatasourceId: this.readerInfo.sourceId,
        sourceDatasourceName: this.readerInfo.sourceName,
        targetDatasourceId: this.writerInfo.targetDatasourceId,
        targetDatasourceName: this.writerInfo.sourceName,
        detailList: this.detailList,
        isCreate: this.writerInfo.status ? '1' : '0',
        extractionName: this.extractionName,
        status: this.status,
        readerDto:{
          readerSplitPk:this.readerInfo.splitPk,
          whereParams:'',
          querySql:''
        },
        writerDto:{
          postSql:'',
          preSql:''
        }
      }
      // // 调api
      jobTemplate.createDataExtractionMore(obj).then(res => {
         
        if(res.data.code==0){
            // 切回第一步
        this.active = 1
        this.dialogFormVisible = false
        this.$emit('refreshList')
        }else{
          this.$message.error(res.data.msg)
        }

      })
    },
    updateJob(){
      const obj = {
        id:this.temp.id,
        sourceDatasourceId: this.readerInfo.sourceId,
        sourceDatasourceName: this.readerInfo.sourceName,
        targetDatasourceId: this.writerInfo.targetDatasourceId,
        targetDatasourceName: this.writerInfo.sourceName,
        detailList: this.detailList,
        isCreate: this.writerInfo.status ? '1' : '0',
        extractionName: this.extractionName,
        status: this.status,
        readerDto:{
          readerSplitPk:this.readerInfo.splitPk,
          whereParams:'',
          querySql:''
        },
        writerDto:{
          postSql:'',
          preSql:''
        }
      }
      // // 调api
      jobTemplate.updateDataExtractionMore(obj).then(res => {
         
        if(res.data.code==0){
            // 切回第一步
        this.active = 1
        this.dialogFormVisible = false
        this.$message.success(res.data.msg)
        this.$emit('refreshList')
        }else{
          this.$message.error(res.data.msg)
        }

      })
    },
    handleJobTemplateSelectDrawer() {
      this.jobTemplateSelectDrawer = !this.jobTemplateSelectDrawer
      if (this.jobTemplateSelectDrawer) {
        this.fetchData()
        this.getExecutor()
      }
    },
    getReaderData() {
      return this.$refs.reader.getData()
    },
    getExecutor() {
      jobTemplate.getExecutorList().then(response => {
        const { content } = response
        this.executorList = content
      })
    },
    fetchData() {
      this.listLoading = true
      jobTemplate.getList(this.listQuery).then(response => {
        const { content } = response
        this.total = content.recordsTotal
        this.list = content.data
        this.listLoading = false
      })
    },
    handleCurrentChange(val) {
      this.temp = Object.assign({}, val)
      this.temp.id = undefined
      this.temp.jobDesc = this.getReaderData().tableName
      this.$refs.jobTemplateSelectDrawer.closeDrawer()
      this.jobTemplate = val.id + '(' + val.jobDesc + ')'
      this.temp.templateId = val.id
    }
  }
}
</script>

<style lang="scss" scoped></style>
